<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item label="部门名称">
        <el-input
          v-model="queryParams.deptName"
          placeholder="请输入部门名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryParams.status" placeholder="部门状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:dept:add']"
        >新增
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="deptList"
      row-key="deptId"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="deptName" label="部门名称" width="260"></el-table-column>
      <el-table-column prop="orderNum" label="排序" width="200"></el-table-column>
      <el-table-column prop="status" label="状态" :formatter="statusFormat" width="100"></el-table-column>
      <el-table-column label="创建时间" align="center" prop="createTime" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:dept:edit']"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-plus"
            @click="handleAdd(scope.row)"
            v-hasPermi="['system:dept:add']"
          >新增
          </el-button>
          <el-button
            v-if="scope.row.parentId != 0"
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:dept:remove']"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改部门对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24" v-if="form.parentId !== 0">
            <el-form-item label="上级部门" prop="parentId">
              <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门名称" prop="deptName">
              <el-input v-model="form.deptName" placeholder="请输入部门名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="显示排序" prop="orderNum">
              <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="负责人" prop="leader">
              <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话" prop="phone">
              <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="部门状态">
              <el-radio-group v-model="form.status">
                <el-radio
                  v-for="dict in statusOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Treeselect from '@riophae/vue-treeselect'
  import '@riophae/vue-treeselect/dist/vue-treeselect.css'

  export default {
    name: 'Organize',
    components: { Treeselect },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 表格树数据
        deptList: [{
          'searchValue': null,
          'createBy': 'admin',
          'createTime': '2020-05-08 11:22:00',
          'updateBy': null,
          'updateTime': null,
          'remark': null,
          'dataScope': null,
          'params': {},
          'deptId': 100,
          'parentId': 0,
          'ancestors': '0',
          'deptName': '移动',
          'orderNum': '0',
          'leader': '移动',
          'phone': '15888888888',
          'email': '123@qq.com',
          'status': '0',
          'delFlag': '0',
          'parentName': null,
          'children': [{
            'searchValue': null,
            'createBy': 'admin',
            'createTime': '2020-05-08 11:22:00',
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'dataScope': null,
            'params': {},
            'deptId': 101,
            'parentId': 100,
            'ancestors': '0,100',
            'deptName': '西安分公司',
            'orderNum': '1',
            'leader': '移动',
            'phone': '15888888888',
            'email': '123@qq.com',
            'status': '0',
            'delFlag': '0',
            'parentName': null,
            'children': [{
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2020-05-08 11:22:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 103,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '研发部门',
              'orderNum': '1',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null,
              'children': []
            }, {
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2020-05-08 11:22:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 104,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '市场部门',
              'orderNum': '2',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null,
              'children': []
            }, {
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2020-05-08 11:22:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 105,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '测试部门',
              'orderNum': '3',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null,
              'children': []
            }, {
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2020-05-08 11:22:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 107,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '运维部门',
              'orderNum': '5',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null,
              'children': []
            }]
          }]
        }],
        // 部门树选项
        deptOptions: [{
          'searchValue': null,
          'createBy': 'admin',
          'createTime': '2018-03-16 11:33:00',
          'updateBy': null,
          'updateTime': null,
          'remark': null,
          'dataScope': null,
          'params': {},
          'deptId': 100,
          'parentId': 0,
          'ancestors': '0',
          'deptName': '移动',
          'orderNum': '0',
          'leader': '移动',
          'phone': '15888888888',
          'email': '123@qq.com',
          'status': '0',
          'delFlag': '0',
          'parentName': null,
          'children': [{
            'searchValue': null,
            'createBy': 'admin',
            'createTime': '2018-03-16 11:33:00',
            'updateBy': null,
            'updateTime': null,
            'remark': null,
            'dataScope': null,
            'params': {},
            'deptId': 101,
            'parentId': 100,
            'ancestors': '0,100',
            'deptName': '西安分公司',
            'orderNum': '1',
            'leader': '移动',
            'phone': '15888888888',
            'email': '123@qq.com',
            'status': '0',
            'delFlag': '0',
            'parentName': null,
            'children': [{
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2018-03-16 11:33:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 103,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '研发部门',
              'orderNum': '1',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null
            }, {
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2018-03-16 11:33:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 104,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '市场部门',
              'orderNum': '2',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null
            }, {
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2018-03-16 11:33:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 105,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '测试部门',
              'orderNum': '3',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null
            }, {
              'searchValue': null,
              'createBy': 'admin',
              'createTime': '2018-03-16 11:33:00',
              'updateBy': null,
              'updateTime': null,
              'remark': null,
              'dataScope': null,
              'params': {},
              'deptId': 107,
              'parentId': 101,
              'ancestors': '0,100,101',
              'deptName': '运维部门',
              'orderNum': '5',
              'leader': '移动',
              'phone': '15888888888',
              'email': '123@qq.com',
              'status': '0',
              'delFlag': '0',
              'parentName': null
            }]
          }]
        }],
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        // 状态数据字典
        statusOptions: [{
          'searchValue': null,
          'createBy': 'admin',
          'createTime': '2020-05-08 11:22:00',
          'updateBy': null,
          'updateTime': null,
          'remark': '正常状态',
          'dataScope': null,
          'params': {},
          'dictCode': 6,
          'dictSort': 1,
          'dictLabel': '正常',
          'dictValue': '0',
          'dictType': 'sys_normal_disable',
          'cssClass': '',
          'listClass': 'primary',
          'isDefault': 'Y',
          'status': '0',
          'default': true
        }, {
          'searchValue': null,
          'createBy': 'admin',
          'createTime': '2020-05-08 11:22:00',
          'updateBy': null,
          'updateTime': null,
          'remark': '停用状态',
          'dataScope': null,
          'params': {},
          'dictCode': 7,
          'dictSort': 2,
          'dictLabel': '停用',
          'dictValue': '1',
          'dictType': 'sys_normal_disable',
          'cssClass': '',
          'listClass': 'danger',
          'isDefault': 'N',
          'status': '0',
          'default': false
        }],
        // 查询参数
        queryParams: {
          deptName: undefined,
          status: undefined
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          parentId: [
            { required: true, message: '上级部门不能为空', trigger: 'blur' }
          ],
          deptName: [
            { required: true, message: '部门名称不能为空', trigger: 'blur' }
          ],
          orderNum: [
            { required: true, message: '菜单顺序不能为空', trigger: 'blur' }
          ],
          email: [
            {
              type: 'email',
              message: '\'请输入正确的邮箱地址',
              trigger: ['blur', 'change']
            }
          ],
          phone: [
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: '请输入正确的手机号码',
              trigger: 'blur'
            }
          ]
        }
      }
    },
    created() {
      setTimeout(() => {
        this.loading = false
      }, 1000)
    },
    methods: {
      /** 搜索按钮操作 */
      handleQuery() {

      },
      // 字典状态字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.status)
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {
          deptId: undefined,
          parentId: undefined,
          deptName: undefined,
          orderNum: undefined,
          leader: undefined,
          phone: undefined,
          email: undefined,
          status: '0'
        }
        this.resetForm('form')
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset()
        if (row != undefined) {
          this.form.parentId = row.deptId
        }
        this.open = true
        this.title = '添加部门'
      },
      /** 转换部门数据结构 */
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children
        }
        return {
          id: node.deptId,
          label: node.deptName,
          children: node.children
        }
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset()
        this.form = row
        this.open = true
        this.title = '修改部门'
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.msgSuccess('操作成功')
            this.open = false
          }
        })
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', '警告', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.msgSuccess('删除成功')
        })
      }
    }
  }
</script>

<style scoped>

</style>
